<template>
  <div class="page-content-container">
    <h2>使用图标</h2>
    <p>本节将介绍如何在项目中瑞太自主研发设计的图标。</p>

    <h3>npm 安装</h3>
    <p>推荐使用 npm 的方式安装，它能更好地和 <a href="https://webpack.js.org/">webpack</a> 打包工具配合使用。</p>
    <p>图标库与UI组件库是独立不相干的，这样做便于维护且有助于在你不需要使用此库中图标时减少打包的体积。</p>
    <p>在 Vue2 中使用图标。</p>
    <!-- --------- -->
    <pre v-highlightjs>
      <code class="javascript">{{ install }}</code>
    </pre>
    <p>在 Vue3 中使用图标。</p>
    <!-- --------- -->
    <pre v-highlightjs>
      <code class="javascript">{{ install2 }}</code>
    </pre>
    <h3>引入</h3>
    <p>在 main.js 中写入以下内容：</p>
    <!-- --------- -->
    <p>Vue2</p>
    <pre v-highlightjs>
      <code class="javascript">{{ code }}</code>
    </pre>
    <!-- --------- -->
    <p>Vue3</p>
    <pre v-highlightjs>
      <code class="javascript">{{ code2 }}</code>
    </pre>
    <p> 以上代码便完成了图标库的引入，具体使用方式，详情请参见 组件 -> 图标。</p>
  </div>
</template>
<script>

export default {
  data() {
    return {
      install: `npm i rtlink-icon@1 -s`,
      install2: `npm i rtlink-icon@2 -s`,
      code:
        `import Vue from 'vue';
import RtlinkIcons from 'rtlink-icon';

Vue.use(RtlinkIcons);
`,
      code2:
        `import RtlinkIcons from 'rtlink-icon';

app.use(RtlinkIcons);
`,
    }
  }
}

</script>


<style scoped>
p {
  font-size: 15px;
}
</style>